<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<title>贝达教育</title>
		<link href="../../../css/style.css" rel="stylesheet" type="text/css" />
		<link href="../../../css/mui.min.css" rel="stylesheet" type="text/css" />

		<style>
			* {
				outline: none;
				webkit-focus-ring-color: rgba(0, 0, 0, 0);
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
			}
			
			#shop {
				background: #fff;
			}
			
			.IndOneP {
				position: relative;
			}
			
			.chengqu {
				font-size: 12px;
				float: left;
				margin-right: 10px;
			}
			
			.bg.mui-media-object {
				width: 1.8rem;
				height: 1.5rem;
			}
			
			.IndOneE span {
				display: inline-block;
				height: 18px;
				line-height: 18px;
			}
			
			.guanzhu {
				border: solid 1px #25aae3;
				font-size: 12px;
				width: 50px;
				text-align: center;
				color: #25aae3;
				border-radius: 10px;
			}
			
			.IndOneM {
				margin-top: 5px;
			}
			
			.mui-show-loading {
				position: fixed;
				padding: 5px;
				width: 120px;
				min-height: 120px;
				top: 45%;
				left: 50%;
				margin-left: -60px;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				border-radius: 5px;
				color: #FFFFFF;
				visibility: hidden;
				margin: 0;
				z-index: 2000;
				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				opacity: 0;
				-webkit-transform: scale(0.9) translate(-50%, -50%);
				transform: scale(0.9) translate(-50%, -50%);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
			}
			
			.mui-show-loading.loading-visible {
				opacity: 1;
				visibility: visible;
				-webkit-transform: scale(1) translate(-50%, -50%);
				transform: scale(1) translate(-50%, -50%);
			}
			
			.mui-show-loading .mui-spinner {
				margin-top: 24px;
				width: 36px;
				height: 36px;
			}
			
			.mui-show-loading .text {
				line-height: 1.6;
				font-family: -apple-system-font, "Helvetica Neue", sans-serif;
				font-size: 14px;
				margin: 10px 0 0;
				color: #fff;
			}
			
			.mui-show-loading-mask {
				position: fixed;
				z-index: 1000;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			
			.mui-show-loading-mask-hidden {
				display: none !important;
			}
			.shoplist{
				width: 90%;
				margin: 0 auto;
				margin-top: 0.2rem;
			}
			.shoplist ul li{
				float: left;
				width: 48%;
				
				margin-bottom: 0.2rem;
			}
			.shoplist ul li:nth-child(even){
				float: right;
			}
			.shoplist ul li img{
				width: 100%;
				height: 2.5rem;
			}
			.shoplist .title{
				margin-bottom: 0.5rem;
			}
			.shopinfo{
				padding: 0.2rem;
				color:#333 ;
				font-size: 12px;
			}
			.shopinfo .shop_title{
				text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
			}
			.shopinfo .shop_jifen{
				color: #df0024;
				padding: 0.2rem 0;
				
			}
			.shopinfo .shop_over{
				color: #fff;
				background: #95cdfe;
				border-radius: 10px;
				text-align: center;
				float: left;
				font-size: 10px;
				padding: 0 0.1rem;
				height: 0.3rem;
				line-height: 0.3rem;
				margin-bottom: 0.2rem;
			}
			#shop .search{
			 background:#FFF; height:32px; width:90%; border-radius:18px; z-index:999; margin:0px auto;
			 position: absolute;
			 left: 50%;
			 margin-left: -45%;
			 border: none!important;
			 margin-top: 10px;
		}
		#shop .searchI{ width:100%; line-height:32px; border:none; color:#282828; text-align:center; background:url(../images/icon/search.png) no-repeat 9% center; background-size:20px;font-size:14px;}
		#shop .smallBanner{
			width: 90%;
			margin: 0 auto;
		  height: 100px;
		 
		}
		#shop .smallBanner img{
			
			border-radius: 10px;
		}
		.swiper-wrapper img{
			height: 200px;
		}
		</style>
	</head>

	<body>
		<div id="shop">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff;">

				<div class="mui-scroll">
			<!--banner-开始-->
			<div class="swiper-container">
				<div class="swiper-wrapper"></div>
				<div class="pagination"></div> 
			</div>
			<div class="clear"></div>

			<!--腰线-开始-->

			<!--育儿课程-开始-->
			<div id="shoplist" class="shoplist">
				<ul>
                    <li v-for="item in recommend">
                        <a @tap="opendetail(item)" style="border: 1px solid #f7f7f7;border-radius: 5px;overflow: hidden;">
                            <div style="padding: 5px;">
                                <img :src="item.pic" />
                            </div>
                            <div class="shopinfo">
                                <div class="shop_title">{{item.name}}</div>
                                <div style="display: flex;flex-wrap: nowrap;position: relative; width: 100%;padding-top: 10px;">
                                    <span><span style="color: #ffc832;font-weight: bold;">{{item.point}}</span>积分</span>
                                    <span style="position: absolute;top: 10px;right: 0px;">库存{{item.count}}件</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
			</div>
			</div>
			</div>
		</div>
			<!--育儿课程-结束-->
		
		<script type="text/javascript" src="../../../js/jquery-1.8.3.min.js"></script>
	<script src="../../../js/idangerous.swiper.min.js"></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/app.js"></script>

	<script src="../../../js/token.js"></script>
	<script>
		var uid = "";
		var favoritestatus = 0;
		var point = '';
		var pages=1;
		//mui初始化，配置下拉刷新
		mui.init({
					gestureConfig: {
						doubletap: true,
						longtap: true, //默认为false 
						click: true
					},
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							callback: function() {
								pages = 1
								pulldownRefresh(pages)
							}
						},
						up: {
							contentrefresh: '正在加载...',
							callback: function() {
								pages++;
								pullupRefresh(pages)
							}
						}
					}
				});

		mui.plusReady(function() {
			//plus.runtime.setBadgeNumber(3); 
			var state = app.getState();
			var point = '';
			uid = state.userid;
			memberToken = state.memberToken;
			var self = plus.webview.currentWebview();  
			typeid = self.typeid;
			data = {
				uid: uid,
				memberToken: memberToken,
				type:typeid
			};
			//轮播图
			mui.post(Apiurl+'index/banner', {
				uid: uid,
				memberToken: memberToken,
				type: 7
			}, function(data) {
				var bannerHtml = "";
				//alert(JSON.stringify(data.banner_pic)) 
				for(var i = 0; i < data.length; i++) {
					bannerHtml += "<div class=\"swiper-slide\" onclick=\"open_detail('" + data[i].banner_url + "','" + data[i].banner_title + "');\"><img src='" + data[i].banner_pic + "'></div>";
				}
				$(".swiper-wrapper").html(bannerHtml);
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					pagination: '.pagination',
					paginationClickable: true,
					moveStartThreshold: 100,
					centeredSlides: true,
					autoplay: 3500,
					autoplayDisableOnInteraction: false
				})
				
			}, 'json')
			data.page=1;
			mui.post(Apiurl+'shop/list_new', data, function(data) {
				if(data.list && data.list.length>0){
					pullrefresh.recommend=data.list
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
			}, 'json')
			
		});

		var pullrefresh = new Vue({
			el: '#pullrefresh',
			data: {
				banners: [], //顶部banner数据
				types: [], //分类数据
				recommend: []
			},
			methods: {
				opendetail: function(item) {
					mui.openWindow({
						url: 'shopcontent.html',
						id: 'schoolsdetail',
						extras: {
							instid: item.id
						},
						styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#25aae3', //导航栏背景色
									titleText: '商品详情', //导航栏标题
									titleColor: '#F7F7F7', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									splitLine: { //底部分割线
										color: '#cccccc'
									}
								}
							},
						createNew: true,

					});
				},
	
			}
		});

		//下拉刷新
		function pulldownRefresh(pages) {
			if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
			data.page=pages
			mui.post(Apiurl+'shop/list_new', data, function(data) {
				if(data.list && data.list.length>0){
					pullrefresh.recommend=data.list
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
			}, 'json')
			 
			
		}
		//上拉加载
		function pullupRefresh(pages) {
			data.page=pages;
			//请求历史列表信息流
			mui.post(Apiurl+'shop/list_new', data, function(data) {
				if(pages <= data.pagecount){
					if(data.list && data.list.length > 0) {
						pullrefresh.recommend= pullrefresh.recommend.concat(data.list);		
					}
				}
				
			}, 'json');		 
			setTimeout(function () { 
			    mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
			    mui('#pullrefresh').pullRefresh().endPullupToRefresh();
			}, 1000)     
		}
		

		
	</script>
	</body>

	

</html>